<template>
	<view v-if="!loadding" :data-theme='theme()' :class="theme() || ''">
		<view class="teamPage">
			<view class="titleView">
				<view class="recharge_money">
					<view class="title">累计充值</view>
					<view class="titleNum">{{recharge_money}}</view>
				</view>
				<view>
					<view class="title">我的业绩</view>
					<view class="titleNum">{{achievement}}</view>
				</view>
			</view>
			<view class="tabs">
				<view :class="tabsValue==0?'tabsActive':''" @click="tabsValue=0">直推会员</view>
				<view :class="tabsValue==1?'tabsActive':''"  @click="tabsValue=1">间推会员</view>
			</view>
			<view class="list" v-if="!tabsValue">
				<view class="listView" v-for="(item,key) of listData" :key="key" @click="nav(item)">
					<image class="avatarUrl" :src="item.avatarUrl" />
					<view class="name">{{item.nickName}}</view>
					<view class="grade">
						<view>业绩：{{item.achievement}}</view>
						<view>会员等级：{{item.grade}}</view>
					</view>
					<image class="right" src="/static/right.png" />
				</view>
				<view style="text-align:center" v-if="!listData.length">暂无邀请</view>
			</view>
			<view class="list" v-else>
				<view class="listView" v-for="(item,key) of listData1" :key="key"  @click="nav(item)">
					<image class="avatarUrl" :src="item.avatarUrl" />
					<view class="name">{{item.nickName}}</view>
					<view class="grade">
						<view>业绩：{{item.achievement}}</view>
						<view>会员等级：{{item.grade}}</view>
					</view>
					<image class="right" src="/static/right.png" />
				</view>
				<view style="text-align:center" v-if="!listData1.length">暂无邀请</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/*是否加载完成*/
				loadding: true,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				/*数据*/
				listData: [],
				listData1: [],
				page:1,
				page1:1,
				achievement:"",
				recharge_money:"",
				/*默认地址id*/
				tabsValue: 0,
				options: {}
			}
		},
		onLoad: function(options) {
			this.options = options;
			this.recharge_money=uni.getStorageSync('recharge_money')
			/*获取地址列表*/
			uni.showLoading({
				title: '加载中'
			});
			this.getachievement();
			this.getData();
			this.getData1();
		},
		onShow: function() {
		},
		methods: {
			/*获取数据*/
			getachievement() {
				let self = this;
				self._get('user.team/myAchievement', {
				}, function(res) {
					self.achievement = res.data.achievement;
				});
			},
			/*获取数据*/
			getData() {
				let self = this;
				let dataType = self.dataType;
				self._get('user.team/list', {
					type:"direct",
					page:this.page,
				}, function(res) {
					 self.listData = [...self.listData,...res.data.list.data];
					 if (res.data.list.total > self.listData.length) {
						self.page = self.page+1;
						self.getData();
					}
					self.loadding = false;
					uni.hideLoading();
				});
			},
			getData1() {
				let self = this;
				let dataType = self.dataType;
				self._get('user.team/list', {
					type:"secondary",
					page:this.page1,
				}, function(res) {
					 self.listData1 = [...self.listData1,...res.data.list.data];
					 if (res.data.list.total > self.listData1.length) {
						self.page1 = self.page1+1;
						self.getData1();
					}
					self.loadding = false;
					uni.hideLoading();
				});
			},


			/*跳转页面*/
			addAddress() {
				let delta = 1;
				if (this.options.source === 'order') {
					delta = 2;
				}
				this.gotoPage('/pages/user/address/add/add?delta=' + delta);
			},

			/*点击单选*/
			radioChange(e) {
				let self = this;
				self.default_id = e;
				self._post('user.address/setDefault', {
					address_id: e,
				}, function(res) {
					if (self.options.source === 'order') {
						// #ifndef H5
						uni.navigateBack();
						// #endif
						// #ifdef H5
						history.go(-1);
						// #endif
					}
				});
				return false;

			},

			/*编辑地址*/
			editAddress(e) {
				this.gotoPage('/pages/user/address/edit/edit?address_id=' + e);
			},

			/*删除地址*/
			delAddress(e) {
				let self = this;
				wx.showModal({
					title: "提示",
					content: "您确定要移除当前收货地址吗?",
					success: function(o) {
						o.confirm && self._get('user.address/delete', {
							address_id: e
						}, function(result) {
							if (result.code == 1) {
								uni.showToast({
									title: '删除成功',
									duration: 2000
								});
								self.getData();
							}

						});
					}
				});

			},
			nav(e){
				this.gotoPage(`/pages/user/team/list?nickName=${e.nickName}&user_id=${e.user_id}&avatarUrl=${e.avatarUrl}&`);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.teamPage{
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.titleView{
		margin: 0 30rpx;
		border-radius: 30rpx;
		border: 1rpx solid #eee;
		padding: 30rpx;
		background: #fcfcfc;
		display: flex;
		align-items: center;
		justify-content: space-around;
		view{
			flex: 1;
		}
		.recharge_money{
			border-right: 1rpx solid #ccc;
		}
	}
	.title{
		text-align: center;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	.titleNum{
		text-align: center;
		font-size: 40rpx;
		margin-bottom: 20rpx;
		font-weight: 600;
		color:rgb(236, 26, 26);
	}
	.list{
		flex: 1;
		overflow-y: auto;
		.listView{
			display: flex;
			align-items: center;
			// justify-content: space-between;
			padding: 30rpx 30rpx 10rpx;
			border-bottom: 2rpx solid #eee;
			.avatarUrl{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			.name{
				width: 40%;
				text-align: center;
			}
			.grade{
				width: 40%;
				view{
					text-align: center;
				}
			}
			.right{
				height: 30rpx;
				width: 30rpx;
			}
		}
	}
	.tabs{
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		height: 50rpx;
		>view{
			flex: 1;
			text-align: center;
		}
		.tabsActive{
			color: #05B572;
			font-weight: 600;
		}
	}
	

.address-form {
	/* border-top: 16rpx solid #f2f2f2; */
}

.address-form .key-name {
	width: 140rpx;
	font-size: 32rpx;
}

.address-form .btn-red {
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	box-shadow: 0 8rpx 16rpx 0 rgba(226, 35, 26, 0.6);
}

.addBtn {
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
}
</style>
